<template>
  <chart :auto-resize="true" :options="options"></chart>
</template>

<script>
var areaList = [
  "1.01",
  "1.02",
  "1.03",
  " 1.04",
  " 1.05",
  " 1.06",
  " 1.07",
  " 1.08",
  " 1.09",
  "1.10",
  " 1.11",
  " 1.12",
  " 1.13",
  " 1.14",
  " 1.15",
];

var arr = [39, 39, 39, 41, 28, 26, 22, 19, 19, 19, 28, 18, 13, 23, 18]; //处理中的数据
var arr1 = [10, 10, 10, 15, 9, 7, 13, 21, 21, 21, 12, 3, 10, 2, 6];
var arr3 = [21, 21, 21, 29, 15, 18, 9, 7, 7, 7, 15, 25, 18, 11, 21];
var displayNum = screen.width > 1500 ? 5 : 10; //每次显示数据条数
var groupNum = Math.ceil(arr.length / displayNum);
var arrGroup = [];
// arr循环
for (var i = 0; i < arr.length; i += displayNum) {
  //数据按个数分组存储
  arrGroup.push(arr.slice(i, i + displayNum));
}

var areaGroup = [];
for (var i = 0; i < areaList.length; i += displayNum) {
  //区域名称按个数分组存储
  areaGroup.push(areaList.slice(i, i + displayNum));
}
var groupOption = [];
for (var i = 0; i < groupNum; i++) {
  var temp = {
    xAxis: [
      {
        type: "category",
        axisLabel: {
          show: true,
          textStyle: {
            color: "#7e878e",
            fontSize: 12,
          },
          interval: 0,
          rotate: displayNum > 13 ? 25 : 0, //数据超过13条时，横坐标标签斜置
        },
        data: areaGroup[i],
        splitLine: { show: false },
      },
    ],
    series: [
      // { data: arrGroup[i] },
    ],
  };
  groupOption.push(temp);
}
export default {
  name: "Che",
  methods: {},
  mounted() {},
  data() {
    return {
      options: {
        baseOption: {
          timeline: {
            // y: 0,
            axisType: "category",
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 2000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: areaGroup,
            label: {
              formatter: function(s) {
                return "";
              },
            },
            // 不显示底下的切换滚轮
            show: false,
          },
          title: {
            subtext: "",
          },
          tooltip: {},
          calculable: true,
          grid: {
            // top: 80,
            // bottom: 100,
          },
          legend: {
            top: 15,
            textStyle: {
              color: "#48eaff",
              fontSize: 12,
            },
          },

          dataset: {
            dimensions: ["product", "处理中", "待处理", "已完成"],
            // source: [
            //     {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            //     {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            //     {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            //     {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
            // ]
            source: {
              // 'product':
              product: areaList,
              处理中: arr,
              待处理: arr1,
              已完成: arr3,
            },
          },
          xAxis: [
            {
              type: "category",
              axisLabel: { interval: 0 },
              data: areaList,
              splitLine: { show: false },
              boundaryGap: false, // x轴两边不留白
            },
          ],
          yAxis: [
            {
              show: true,

              scale: true,
              max: 50,
              min: 5,
              splitNumber: 7,
              minInterval: 1, //纵坐标为整数
              type: "value",
              offset: 10,
              //   name: "处",
              // max: 53500
              // max: 3
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              //   去掉横线
              axisTick: {
                show: false,
                // interval: 100,
              },
              axisLabel: {
                textStyle: {
                  color: "#48EAFFFF",
                },
              },
            },
          ],
          series: [
            {
              name: "处理中",
              type: "bar",
              barWidth: 8,

              label: {
                normal: {
                  show: true,
                  position: "top",
                  color: "#D0D8E2",
                  formatter: function(params) {
                    //总数为0时显示数字
                    if (params.value === 0) {
                      return params.value;
                    } else {
                      return "";
                    }
                  },
                },
              },
              data: arr1,
              itemStyle: {
                normal: {
                  color: "#225ef8",
                  barBorderRadius: [18, 18, 0, 0],
                },
              },
            },
            {
              name: "待处理",
              type: "bar",
              barWidth: 8,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  color: "#D0D8E2",
                  formatter: function(params) {
                    //总数为0时显示数字
                    if (params.value === 0) {
                      return params.value;
                    } else {
                      return "";
                    }
                  },
                },
              },
              data: arr,
              itemStyle: {
                normal: {
                  color: "#52bdf9",
                  barBorderRadius: [18, 18, 0, 0],
                },
              },
            },
            {
              name: "已完成",
              type: "bar",
              barWidth: 8,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  color: "#D0D8E2",
                  formatter: function(params) {
                    //总数为0时显示数字
                    if (params.value === 0) {
                      return params.value;
                    } else {
                      return "";
                    }
                  },
                },
              },
              data: arr3,
              itemStyle: {
                normal: {
                  color: "#c3f388",
                  barBorderRadius: [18, 18, 0, 0],
                },
              },
            },
          ],
        },
        options: groupOption,
      },
    };
  },
};
</script>
